<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/jspcommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${pdName } - 果果街</title>
<meta name="keywords" content="果果,果果网,果果街,淘宝网导购,淘宝母婴,母婴用品,母婴产品,母婴网购,怀孕,孕期,婴幼儿,儿童,0-1岁,1-3岁,3-6岁,妈妈购物分享,逛淘宝,童装,童鞋,玩具,早教,启蒙,亲子,亲子装,纸尿裤,奶粉,母婴类美丽说,母婴类蘑菇街,母婴类爱乐活" />
<meta name="description" content="看看妈妈们为宝宝淘到的好东西，参加品牌母婴电商限时高额返利活动，推荐别人购买自己拿佣金，果果街是妈妈分享育儿消费经验，网购省钱的好地方。" />
<%@ include file="../common/css.jsp"%>
<%@ include file="../common/js.jsp"%>
<link type="text/css" rel="stylesheet" href="/css/v4/channel.css"/>
<link type="text/css" rel="stylesheet" href="/css/v4/detail.css"/>

<!--[if ie 6]><script src="/js/v4/iepng.js" type="text/javascript"></script><![endif]-->
<!--[if ie]><link href="/css/v4/common/IE.css" type="text/css" rel="stylesheet"><![endif]-->
</head>

<body>
	<!-- head -->
    <%@ include file="../common/header.jsp" %>
    <!-- head--end-->
    <!-- gzw_tip -->
    <div class=" gzw_share">
    	<a href="javascript:void(0);" onclick="sharelink()"><img src="../../images/v4/other/icon_19.png" /></a><a href="javascript:void(0);" onclick="sharelink()" class="txt"><img src="../../images/v4/other/icon_20.png" /></a>
    </div>
    <!-- gzw_tip--end-->
    <!-- body -->
    
    	<!-- ad-->
        <div class="w100p">
			<div class="w980 mg mt5 ad_box">
			<%-- 
                <img src="../../images/v4/other/ad_980x74.png" class="block" />
               	<a href="#" class="first">广告一</a>
                <a href="#" class="second">广告二</a>
                <a href="#" class="third">广告三</a>--%>
                
             <%-- 
                <c:if test="${pd == 'boy' }">
                <a href="${boyAdvList[0].hyperlink}"><img src="${boyAdvList[0].picture}" width="980" class="block" /></a>
                </c:if>
                <c:if test="${pd == 'girl' }">
                <a href="${girlAdvList[0].hyperlink}"><img src="${girlAdvList[0].picture}" width="980" class="block" /></a>
                </c:if>
                <c:if test="${pd == 'ymm' }">
                <a href="${motherAdvList[0].hyperlink}"><img src="${motherAdvList[0].picture}" width="980" class="block" /></a>
                </c:if>
              --%>
          	</div>
        </div>
    	<!-- ad--end-->
        
        <!-- content-->
        <div class="w100p mt45 mg main_wrap" id="gzw_wrap">
                <!-- nav -->
                <div class="p_nav mb10 clearfix">
                	<div class="fl">
                        <a class="main_key">${tagShow.name }</a><a href="/shop/shopping.htm?pd=${spfl }&tp=commend&sex=${sex }&id=${tagShow.identifier }&mi=${minPrice}&ma=${maxPrice}" class="key_sorts <c:if test="${type=='commend' }">current</c:if>">最热</a><a href="/shop/shopping.htm?pd=${spfl }&tp=new&sex=${sex }&id=${tagShow.identifier }&mi=${minPrice}&ma=${maxPrice}" class="key_sorts <c:if test="${type=='new' }">current</c:if>">最新</a> 
                    </div>
                    <div class="trandition">
                    	<span class="title">价格：</span>
                    	<div class="options" id="hoverlink">
                    	<a class="tit"><c:choose><c:when test="${maxPrice==50 }">50元以下</c:when><c:when test="${maxPrice==100 }">100元以下</c:when><c:when test="${maxPrice==300 }">300元以下</c:when><c:when test="${minPrice==300 }">更高价格</c:when><c:otherwise>全部</c:otherwise></c:choose><img src="../../images/v4/common/black_triangle.png" class="b_triangle" /></a>
                    	<div class=" hover_wrap" id="myhover" style="display: none;">
                    	<ul>
                    		<li><a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }" class="current">全部</a></li>
                            <li><a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&ma=50">50元以下</a></li>
                            <li><a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=50&ma=100">100元以下</a></li>
                            <li><a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=100&ma=300">300元以下</a></li>
                            <li><a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=300">更高价格</a></li>
                        	</ul>
                        	<span class="up_arrow">arrow</span>
                    	</div>
                    </div>
                    </div>
                </div>
                <!-- nav -->
                
                <!-- main -->
                <div class="main clearfix" id="grid_content">
                    <!-- left-->
                    <div class="item_box side_bar_wrap">
                        <c:forEach items="${tags }" var="tag">
                        <div class="s_bar">
                            <h3>${tag.name }</h3>
                            <div class="tag_box">
                            	<c:forEach items="${tag.tagList }" var="t">
                                <a href="/shop/shopping.htm?pd=${spfl }&tp=${type }&id=${t.identifier }&mi=${minPrice}&ma=${maxPrice}&page=1" <c:if test="${t.identifier==tagShow.identifier }">class="current"</c:if>>${t.name }</a>
                                </c:forEach>
                                <br class="clear" />
                            </div>
                        </div>
                        </c:forEach>
                        <!-- <div class="search_bar">
                            <input type="text" class=" def_text focus" />
                            <input type="button" value="搜索" class="button" />
                        </div>	 -->
                    </div>
					<c:forEach items="${pageModel.list }" var="doing" varStatus="v">
                    <div class="item_box box_s1">
                    	
                        <div class="shadow"></div>
                        <div class="pro_box">
                            <c:if test="${doing.doingProductList[0].from=='淘宝' && (doing.doingProductList[0].maxPrice-doing.doingProductList[0].price)>=10 }">
                            <span class=" icon_bg pro_lbl">降价${doing.doingProductList[0].maxPrice-doing.doingProductList[0].price }元</span>
                            </c:if>
                            <div class="love_comment_ope" style="display: none;" onmouseover="$(this).show()" onmouseout="$(this).hide()">
                                <a href="javascript:void(0);" onclick="GUOGUO.loveDoing('${doing.identifier}')" class="icon_bg">收藏</a><a href="/shop/go.htm?pid=${doing.doingProductList[0].identifier }" target="_blank" class="icon_bg comment">评论</a>
                            </div>
                            <a target="_blank" href="/shop/go.htm?pid=${doing.doingProductList[0].identifier }" class="pic"><img src="${doing.doingProductList[0].imageServer }${doing.doingProductList[0].picThumb }_200xXXX.jpg" alt="${doing.doingProductList[0].name }" title="${doing.doingProductList[0].name }" width="200" height="${doing.doingProductList[0].height200xxx }" onmouseover="$(this).parent().prev('div').show()" onmouseout="$(this).parent().prev('div').hide()" class=" block" /></a>
                        </div>
                        <div class="pro_t_p">
							<a class="title">
								<c:if test="${doing.replaceContent==null }">${doing.doingProductList[0].showName }</c:if>
								<c:if test="${doing.replaceContent!=null }">${doing.showContent }</c:if>
							</a>
							<span class="price">￥${doing.doingProductList[0].price }</span>
						</div>
                        <div class="l_c_nums">
                        	<c:if test="${doing.doingProductList[0].commission>0 }">
	                        <a href="/shop/go.htm?pid=${doing.doingProductList[0].identifier }" target="_blank" class="fanli"><img src="../../images/v4/other/icon_8.png" class=" block" /></a>
                        	</c:if>
                        	<span><b class="red_heart"></b><a class="collection_nums" href="javascript:void(0);" onclick="GUOGUO.loveDoing('${doing.identifier}')">收藏</a><c:if test="${doing.loveAmount>0 }"><i>${doing.loveAmount }</i></c:if></span>
                        </div>
                        <c:if test="${doing.doingProductList[0].doingProductTime != null }">
                       <div class="interval_fl">
                        	<div class="interval_box">
                            	<span class="i_left_time">
                                	还有${doing.doingProductList[0].doingProductTime.time }
                                </span>
                                <span class="fl_percent">
                                	返<fmt:formatNumber value="${doing.doingProductList[0].doingProductTime.guoguojieCommissionRate*100 }" pattern="#"  />%
                                </span>
                            </div>
                        </div>
                        </c:if>
                        <div class="comment_box">
                            <ul> 
                            	<li <c:if test="${fn:length(doing.commentList)>0 }">class="line"</c:if>>
                                    <div class="lay_lr_box">
                                        <a href="/member/tashare.htm?ta=${doing.member}" target="_blank" class="l_box"><img src="${doing.memberImageServer }${doing.memberAvatar }" width="32" height="32" class=" block" /></a>
                                        <div class="r_box">
                                            <a href="/member/tashare.htm?ta=${doing.member}" target="_blank" class="name">${doing.memberName }</a><i class="who_share">分享</i>
                                            <p class="share_time">${doing.doingCreated }</p>
                                        </div>
                                    </div>
                                </li>
                            	<c:forEach items="${doing.commentList }" var="c" varStatus="v">
                                <li class="line">
                                    <div class="lay_lr_box">
                                        <a href="/member/tashare.htm?ta=${c.member}" target="_blank" class="l_box"><img src="${c.memberImageServer }${c.memberAvatar }" width="32" height="32" class=" block" /></a>
                                        <div class="r_box">
                                            <a href="/member/tashare.htm?ta=${c.member}" target="_blank" class="name">${c.nickname }</a>
                                            <span class="info clr9">${c.content }</span>
                                        </div>
                                    </div>
                                </li>
                                </c:forEach>
                                <c:if test="${fn:length(doing.commentList)>0 }">
                                <li class="last">
                                    <a href="/shop/go.htm?pid=${doing.doingProductList[0].identifier }" target="_blank">查看全部<i>${doing.commentCount }</i>条评论...</a>
                                </li>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                    </c:forEach>
                </div>
                <!-- main--end-->
                
        </div>
        <!-- content--end-->
        <div class="w100p">
        	<div class="w980 mg">
        		<div class="fanye mt50 mb35" id="pager"></div>
        	</div>
        </div>
        <div class="clear"></div>
        <%@include file="../common/footer.jsp" %>
        <!-- back-->
        <div class="back">
        	<a href="javascript:void(0);"><img src="../../images/v4/common/back.png" class="block" /></a>
        </div>
        <!-- back--end-->
    <!-- body--end-->
    <script type="text/javascript">
    	$(function(){
    		
    		var winWidth=$(window).width();
    		var gzwWrap=$("#gzw_wrap");
    		
    		if(winWidth<1190&&winWidth>=952){
    			gzwWrap.css({
    				"width":"952px"
    			});
    		}
    		
    		if(winWidth<952){
    			gzwWrap.css({
    				"width":"952px"
    			});
    		}
    		
    		$(window).resize(function(){
    			winWidth=$(window).width();
    			if(winWidth>=1904){
    				gzwWrap.css({
    					"width":"1904px"
    				});
    			}
    		
    			if(winWidth<1904&&winWidth>=1666){
    				gzwWrap.css({
    					"width":"1666px"
    				});
    			}	
    		
    			if(winWidth<1666&&winWidth>=1428){
    				gzwWrap.css({
    					"width":"1428px"
    				});
    			}
    				
    			
    			if(winWidth<1428&&winWidth>=1190){
    				gzwWrap.css({
    					"width":"1190px"
    				});
    			}
    			
    			if(winWidth<1190&&winWidth>=952){
    				gzwWrap.css({
    					"width":"952px"
    				});
    			}
    			
    			if(winWidth<952){
    				gzwWrap.css({
    					"width":"952px"
    				});
    			}
    		});
    		
    		$("#pager").pager({
    			pagenumber : "${pageModel.currentPage}",
    			pagecount : "${pageModel.totalPage}",
    			buttonClickCallback : function(page) {
    				location.href = "/shop/shopping.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=${minPrice}&ma=${maxPrice}&page=" + page;
    			}
    		});
    		
    		<%-- 图片加载完之后给div赋值样式 --%>
			$("div.main").masonry({
				itemSelector:'.item_box',
				columnWidth:238,
				isAnimated:false
			});
			
			var hl=$("#hoverlink a.tit");
			var mh=$("#myhover");
			hl.hover(function(){
				mh.show();
			},function(){
				mh.hide();
			});
			mh.hover(function(){
				mh.show();
			},function(){
				mh.hide();
			});
			
			<%-- 滚动加载效果 --%>
			var loaded = true;
			var times = 3;
			$(window).bind("scroll", function(){
				<%-- 滚动条到网页头部的 高度 --%>
		        var top = document.documentElement.scrollTop + document.body.scrollTop;
		        <%-- 网页的高度 --%>
		        var textheight = $(document).height();
				if (textheight - top - $(window).height() <= 1500) {
					if(loaded){
						loaded = false;
						<%-- 如果是最后一页，判断是否要取多次 --%>
						if(parseInt("${pageModel.currentPage}")==parseInt("${pageModel.totalPage}") 
								&& ((parseInt("${pageModel.currentPage}")-1)*parseInt("${pageModel.pageSize}")+(times-1)*(parseInt("${pageModel.pageSize}")/10))>=parseInt("${pageModel.totalRecord}")){
							return;
						}
						if(times>10){
							return;
						}
						if(parseInt("${pageModel.totalRecord}")<12){
							return;
						}
						<%-- 添加加载中的层 --%>
						$("#grid_content").after('<div class="loading" id="Loading"><img src="../../images/v4/common/waiting.gif" /><span>果果街正在努力加载中...</span></div>');
						<%-- 隐藏分页 --%>
						$("#pager").hide();		
						<%-- 隐藏底部 --%>
						$("#footer").hide();	
						$.get("/shop/shoppingMore.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=${minPrice}&ma=${maxPrice}&page=${pageModel.currentPage}&times="+times,function(data){
							<%-- 计算次数，计算这一页取了多少此 --%>
							times++;
							var $newElems = $(data);	
							$("#grid_content").append($newElems).masonry('appended',$newElems);
							<%-- 删除加载中的层 --%>
							$("#Loading").remove();		
							loaded = true;
							<%-- 展示分页 --%>
							$("#pager").show();
							<%-- 展示底部 --%>
							$("#footer").show();
					  	});
					}
				}
			});
			$.get("/shop/shoppingMore.htm?pd=${spfl }&tp=${type }&sex=${sex }&id=${tagShow.identifier }&mi=${minPrice}&ma=${maxPrice}&page=${pageModel.currentPage}&times=2",function(data){
			 		var $newElems = $(data);	
					$("#grid_content").append($newElems).masonry('appended',$newElems);
			});
			
		});
    	
    </script>
</body>
</html>